<template>
  <view class="comment-item">
    <view
      style="
        display: flex;
        justify-content: space-between;
        margin-bottom: 12rpx;
      "
    >
      <view class="comment-header">
        <v-image
          height="44rpx"
          width="44rpx"
          border-radius="22rpx"
          mode="aspectFill"
          :src="
            myComment ? userStore.userInfo?.avatar || defaultAvatar : avatar
          "
        />
        <view class="comment-user">
          {{ myComment ? userStore.userInfo?.nick_name || '用户名' : name }}
        </view>
        <view v-if="myComment" class="my-comment">
          我的评价
        </view>
        <view v-else-if="getScoreLabel" class="score-comment">
          {{ getScoreLabel }}
        </view>
      </view>
      <view v-if="showCommentTime" style="color: #999999">
        {{ formateDateTime(comment.create_time, 'YYYY-MM-DD') }}
      </view>
    </view>
    <view
      class="comment-content"
      :class="{
        ellipsis: !isExpanded
      }"
    >
      {{ comment.comment_content?.comment_content }}
    </view>

    <view
      v-if="
        (comment.comment_content as unknown as SpuCommentUnifyVO)
          ?.comment_content?.length > 100
      "
      style="display: flex; justify-content: flex-end"
      @click="isExpanded = !isExpanded"
    >
      <wd-icon v-if="!isExpanded" name="arrow-down" />
      <wd-icon v-if="isExpanded" name="arrow-up" />
    </view>

    <view
      v-if="comment.comment_content.comment_images?.length"
      class="comment-content-images"
    >
      <v-image
        v-for="image in comment.comment_content.comment_images"
        :key="image"
        preview
        width="194rpx"
        height="194rpx"
        border-radius="16rpx"
        mode="aspectFit"
        :src="image"
      />
    </view>

    <view
      v-if="showThumb"
      class="comment-thumbs"
      :class="{ thumb: hasThumbsUp }"
    >
      <view style="display: flex; align-items: center" @click="thumbsUp">
        <wd-icon name="thumb-up" />
        <view>有用</view>
        <view class="thumbs-count">
          {{ thumbsUpCount }}
        </view>
      </view>
    </view>

    <template v-if="showReply">
      <view v-if="comment.reply_status === 'REPLIED'" class="comment-reply">
        <view class="comment-reply-header">
          <view style="color: #333333; font-weight: 800">
            商家回复
          </view>
          <view v-if="comment.reply_time" style="color: #999999">
            {{ formateDateTime(comment.reply_time, 'YYYY-MM-DD') }}
          </view>
        </view>
        <view
          class="comment-reply-content comment-content"
          :class="{
            ellipsis: !isReplyExpanded
          }"
        >
          {{ comment.reply_content?.comment_content }}
        </view>
        <view
          v-if="
            (comment.reply_content as unknown as ReplyComment)?.comment_content
              ?.length > 100
          "
          style="display: flex; justify-content: flex-end"
          @click="isReplyExpanded = !isReplyExpanded"
        >
          <wd-icon v-if="!isReplyExpanded" name="arrow-down" />
          <wd-icon v-if="isReplyExpanded" name="arrow-up" />
        </view>
        <view
          v-if="comment.reply_content.comment_images?.length"
          class="comment-content-images"
        >
          <v-image
            v-for="image in comment.reply_content.comment_images"
            :key="image"
            preview
            width="194rpx"
            height="194rpx"
            border-radius="16rpx"
            mode="aspectFit"
            :src="image"
          />
        </view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { randomLocalAvatar, randomName } from '@/utils/generate';
import { formateDateTime } from '@/utils/formater';

const props = defineProps<{
  comment: SpuCommentVO;
  myComment?: boolean;
  showThumb?: boolean;
  showReply?: boolean;
  showCommentTime?: boolean;
}>();

const userStore = $store.user();
const name = randomName();
const avatar = randomLocalAvatar();
const defaultAvatar = randomLocalAvatar(21);

const isExpanded = ref(false);
const isReplyExpanded = ref(false);
const thumbsUpData = ref<Record<string, number>>({});

try {
  thumbsUpData.value = JSON.parse(uni.getStorageSync('thumbsUpData'));
} catch {
  uni.removeStorageSync('thumbsUpData');
}

const { comment, myComment, showThumb } = toRefs(props);

const thumbsUpCount = computed(() => {
  return thumbsUpData.value[comment.value.id] ?? 0;
});

const hasThumbsUp = computed(() => {
  return thumbsUpData.value[comment.value.id] > 0;
});

const thumbsUp = () => {
  try {
    if (thumbsUpData.value[comment.value.id]) {
      thumbsUpData.value[comment.value.id] -= 1;
      if (thumbsUpData.value[comment.value.id] === 0) {
        delete thumbsUpData.value[comment.value.id];
      }
    } else {
      thumbsUpData.value[comment.value.id] = 1;
    }
    uni.setStorageSync('thumbsUpData', JSON.stringify(thumbsUpData.value));
  } catch {
    uni.removeStorageSync('thumbsUpData');
  }
};

const getScoreLabel = computed(() => {
  /* 订单评分 ×0.4 + 商品评分 ×0.2 + 服务评分 ×0.2 + 物流评分 ×0.2 */
  const score = comment.value
    ?.score_content as unknown as SpuCommentScoreContentVO | null;
  if (score) {
    const scoreCount =
      score.order_score * 0.4 +
      score.product_score * 0.2 +
      score.service_score * 0.2 +
      score.logistics_score * 0.2;

    switch (true) {
      case scoreCount >= 4:
        return '好评';
      case scoreCount >= 2:
        return '中评';
      default:
        return '差评';
    }
  }
  return '';
});
</script>
<style lang="scss" scoped>
.comment-item {
  padding: 24rpx;
  background-color: white;
  border-radius: 16rpx;

  .comment-header {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-bottom: 12rpx;
    .comment-user {
      font-size: 26rpx;
    }

    .my-comment {
      color: #ff2f3b;
      background: rgba(255, 47, 59, 0.2);
      border-radius: 20rpx;
      padding: 0 6px;
    }

    .score-comment {
      color: #ffffff;
      background: linear-gradient(161.57deg, #ff6f6f 28.44%, #ff2f3b 75.31%);
      border-radius: 4rpx;
      padding: 0 8rpx;
      font-size: 24rpx;
    }
  }
  .comment-content {
    font-size: 24rpx;
    line-height: 34rpx;
  }

  .comment-content-images {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
    margin-top: 24rpx;
    .v-image {
      border-radius: 16rpx;
    }
  }

  .comment-thumbs {
    font-size: 24rpx;
    margin-top: 12rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .thumb {
    color: #ff2f3b;
  }

  .comment-reply {
    padding: 24rpx;
    font-size: 24rpx;
    background-color: #f5f6fa;
    margin-top: 24rpx;
    border-radius: 16rpx;

    .comment-reply-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .comment-reply-content {
      margin-top: 24rpx;
    }
  }
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
</style>
